{% extends "data_opform.html" %}
{% load i18n %}
{% block headajaxjs %}
    <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}/fullcalendar/fullcalendar.min.css" />
    <style>
        .test {
            border-top: dotted 1px #cccccc;"
        }

    </style>
    <script src="{{ MEDIA_URL }}/fullcalendar/moment.min.js"></script>
    <script src="{{ MEDIA_URL }}/fullcalendar/fullcalendar.min.js"></script>
{% endblock %}
{% block addjs %}
$(function(){
    //$(".form_help").remove();
    $.ajax({
        url:"../../att/choice_widget_for_select_emp/?multiple=T&popup=F&name=UserIDs&userlist=T",
        type:"POST",
        dataType:"html",
        success:function(sdata){
            $("#id_emp_select").html(sdata);
        },
        error:function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus+errorThrown);
        }
    });

    function fillout_timetable(param){
        var url = "../../../att/newgetSchClass/";
        if(param){
            url = url + param;
        }
        $.ajax({
            type:"POST",
            url:url,
            dataType:"json",
            success:function(sdata){
                var html="";
                for(var i in sdata){
                    var data = sdata[i];
                    var sch_name = data["SchName"];
                    if(data['DayOff'] == 1){
                        sch_name = '<span style="color: blue">'+data["SchName"]+'</span>';
                    }
                    if(data['DayOff'] == 2){
                        sch_name = '<span style="color: darkorange">'+data["SchName"]+'</span>';
                    }
                    html += ''
                    +'<tr>'
                    +'    <td>'
                    +'        <div>'
                    +'            <input type="checkbox" timetable="'+data["SchName"]+'" value="'+data["SchclassID"]+'">'
                    +'        </div>'
                    +'    </td>'
                    +'    <td>'
                    +'        <div name="timetable">'+sch_name+'</div>'
                    +'        <div>'+data["StartTime"]+'-'+data["EndTime"]+'</div>'
                    +'    </td>'
                    +'</tr>';
                }
                $(".calendar_table tbody").empty().append(html);
            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus+errorThrown);
            }
        });
    }
    $("#id_query_tb").click(function(){
        var val = $("#time-table-name").val();
        fillout_timetable('?name='+val);
    });
    $("#time-table-name").keydown(function(event){
        if(event.keyCode == 13){
            $("#id_query_tb").click();
        }
    });
    fillout_timetable();
    function get_events(){
        var events = [];
        $(".external-event .calendar_table tbody tr").each(function(){
            var ck_tr = $(this).find("input[type='checkbox']");
            var check = $(ck_tr).attr('checked');
            var worktype = $("#id_WorkType").val();
            var flag = $("#id_Flag").val();
            if(check == 'checked' || check == true){
                var event = {
                    objid: $(ck_tr).val(),
                    worktype: worktype,
                    flag: flag,
                    text: $(this).find("div[name='timetable']").text()
                };
                events.push(event);
            }
        });
        return events;
    };

    $('#fullcalendar').fullCalendar({
        height: 530,
        header: {
            center: '',
            right: 'today prev,next'
        },
        editable: false,
        selectable: true,
        select: function(start, end) {
            var events = get_events();
            var event_len = events.length;
            if(event_len > 0){
                for(var i=0; i < events.length; i++ ){
                    var eventData = {
                        objid: events[i].objid,
                        worktype: events[i].worktype,
                        flag: events[i].flag,
                        title: events[i].text,
                        start: start,
                        end: end
                    };
                    $('#fullcalendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                }
            }else{
                $('#fullcalendar').fullCalendar('unselect');
            }
        },
        eventClick: function(event) {
            console.log(event)
            $('#fullcalendar').fullCalendar( 'removeEvents', event._id)

        },
    });
    $("#id_new_timetable").click(function(){
        layer.open({
            type: 2,
            title: 'Add',
            shadeClose: true,
            shade: 0.8,
            area: ['70%', '90%'],
            content: '/data/att/SchClass/_new_/?_lock=1',
            zIndex: 5
        });
    });
})
    var before_submit = function(){
        $("#events").empty();
        $('#fullcalendar').fullCalendar( 'clientEvents', function(event){
            var obj_id = event.objid;
            var worktype = event.worktype;
            var flag = event.flag;
            var start = event.start.format();
            //var start = event.start._d.formatDate('yyyy-MM-d');
            var end = event.end.format();
            //var end = event.end._d.formatDate('yyyy-MM-d');
            var val = [obj_id, start, end, worktype, flag].join(',');
            var e = '<input name="event" type="hidden" value="'+val+'"/>'
            $("#events").append(e);
        })
        return true;
    };
    var on_row_selected = function(grid, checked, index, key, $row_data){

        $.ajax({
            url:"../../../att/personnel_schedules/",
            type:"POST",
            data: {'id': key},
            dataType:"json",
            success:function(events){
                $('#fullcalendar').fullCalendar( 'removeEvents');
                for(var i=0; i < events.length; i++){
                    var event = events[i];
                    console.log(event)
                    $('#fullcalendar').fullCalendar('renderEvent', event, true); // stick? = true
                }
            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus+errorThrown);
            }
        });
    };
    $("#id_StartDate").attr('readonly', true);
    $("#id_EndDate").attr('readonly', true);

{% endblock %}


{% block form %}
{% autoescape off %}
<tr>
    {% autoescape off %}
    <td style="width: 23%; height: 500px">
        <div id="id_emp_select"></div>
    </td>
    {% endautoescape %}
    <td style="width: 63%; height: 500px;">
        <table> <tbody>
            <tr class="test">
                <td colspan="6">{% trans '覆盖以下区间的排班' %}:</td>
            </tr>
            <tr><td colspan="6"height="10"></td></tr>
            <tr>
                {{form.StartDate|field_as_td_h}}
                {{form.EndDate|field_as_td_h}}
            </tr>
            <tr><td colspan="6" height="10" style="border-top: dotted 1px #cccccc;"></td></tr>
            <tr><td colspan="6">
                <div id="fullcalendar"></div>
                <div id="events" class="displayN"></div>
            </td></tr>
        </tbody></table>
    </td>
    <td style="width: 13%;">
        <div class="external-events">
            <div class="event-type">
                {% trans '工作类型' %}
            </div>
            <div style="padding: 5px 5px 5px 5px">
                <select name="" id="id_WorkType">
                    <option value="0">{% trans '正常工作' %}</option>
                    <option value="1">{% trans '平日加班' %}</option>
                    <option value="2">{% trans '周末加班' %}</option>
                    <option value="3">{% trans '节假日加班' %}</option>
                </select>
            </div>
            <div class="event-type">
                {% trans '当天存在员工排班时' %}
            </div>
            <div style="padding: 5px 5px 5px 5px">
                <select name="Flag" id="id_Flag">
                    <option value="1">{% trans '仅临时排班有效' %}</option>
                    <option value="2">{% trans '追加于员工排班之后' %}</option>
                </select>
            </div>
            <div class="event-title">
                <span>{% trans '时段' %}</span>
            </div>
            <div style="padding: 3px 0 3px 0;border-bottom: 1px solid #a4a9aa">
                <input type="text" id="time-table-name">
                <span class="action_Search">&nbsp;</span>
                <a id="id_query_tb" href="javascript:void(0);" class="Link_blue1">{% trans '查询' %}</a>
            </div>
            <div>
                <div class='external-event external-event-tmp' style="">
                    <table class="calendar_table">
                        <tbody></tbody>
                    </table>
                </div>
            </div>
		</div>
    </td>
</tr>
{% endautoescape %}
{% endblock%}